<div class="item">
  <input name="{{parentType}}[{{attrName}}][{{index}}][sponsor_id]" type="hidden" value="{{id}}">
  <input class="js-position" name="{{parentType}}[{{attrName}}][{{index}}][position]" type="hidden">

  <div class="right floated content">
    <div class="ui tiny icon button js-remove"><i class="remove icon"></i></div>
  </div>

  <h4 class="ui sponsor header">
    #<span class="js-position-display">{{position}}</span> &mdash;
    <a href="{{url}}" target="_blank">{{name}}</a>
  </h4>

  <div class="fields">
    <div class="required field six wide">
      <label>Title</label>
      <input
        name="{{parentType}}[{{attrName}}][{{index}}][title]"
        value="{{extras.title}}"
      >
    </div>

    <div class="required field ten wide">
      <label>Link</label>
      <input
        name="{{parentType}}[{{attrName}}][{{index}}][link_url]"
        value="{{extras.link_url}}"
      >
    </div>
  </div>

  <div class="field">
    <label>Description</label>
    <textarea
      name="{{parentType}}[{{attrName}}][{{index}}][description]"
      value=""
      placeholder="Markdown enabled."
      rows="1"
    >{{extras.description}}</textarea>
  </div>

  <div class="fields">
    <div class="field">
      <label>Starts At</label>
      <input
        name="{{parentType}}[{{attrName}}][{{index}}][starts_at]"
        class="js-time-in-seconds"
      >
    </div>

    <div class="field">
      <label>Ends At</label>
      <input
        name="{{parentType}}[{{attrName}}][{{index}}][ends_at]"
        class="js-time-in-seconds"
      >
    </div>
  </div>
</div>

<div class="ui divider"></div>
